<template>
  <div class="app-container no-pagination">
    <el-row :gutter="20">
      <el-col :span="5">
        <el-card>
          <div slot="header" class="card-title-text">
            <span>方案信息</span>
            <el-button style="float: right; padding: 3px 0" type="text"><i class="el-icon-setting"/></el-button>
          </div>
        </el-card>
      </el-col>
      <el-col :span="19" class="mini-container">
        <div class="filter-container">
          <div class="right-block">
            <el-button type="primary" size="small">新增方案</el-button>
            <el-button type="primary" size="small">修改方案</el-button>
            <el-button type="primary" size="small">删除方案</el-button>
            <el-button type="primary" size="small">排序</el-button>
            <el-button type="primary" size="small">打印</el-button>
          </div>
        </div>
        <div class="table-title">凭证归档列表</div>
        <el-table
          ref="multipleTable"
          :border="true"
          :data="tableData"
          :header-cell-style="{textAlign: 'center'}"
          :cell-style="{textAlign: 'center'}"
          tooltip-effect="dark"
          style="width: 100%">
          <el-table-column
            prop="name"
            label="编码"/>
          <el-table-column
            prop="name"
            label="摘要"/>
          <el-table-column
            prop="name"
            label="备注"/>
        </el-table>
        <div class="page-pagination">
          <pagination/>
        </div>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="dialogVisible" :title="dialogType === 'add'?'新增拨款种类':'编辑拨款种类'">
      <el-form ref="form" :model="form" :rules="rules" label-width="40px">
        <el-form-item label="编码" prop="encode">
          <el-input v-model="form.encode"/>
        </el-form-item>
        <el-form-item label="摘要" prop="name">
          <el-input v-model="form.name"/>
        </el-form-item>
        <el-form-item label="备注" prop="mark">
          <el-input v-model="form.mark"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="okHandler">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
function createForm(tar) {
  let raw = {
    encode: '',
    name: '',
    mark: ''
  }
  if (tar) {
    raw = Object.assign(raw, tar)
  }
  return raw
}
export default {
  name: 'VoucherArchiveList',
  components: { Pagination },
  data() {
    return {
      keyword: '',
      dialogVisible: false,
      dialogType: 'add',
      form: createForm(),
      rules: {},
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      multipleSelection: []
    }
  },
  computed: {
  },
  created() {
  },
  methods: {
    editRow(row) {
      this.form = createForm(row)
      this.dialogVisible = true
      this.dialogType = 'edit'
    },
    deleteRow() {

    },
    addHandler() {
      this.form = createForm()
      this.dialogVisible = true
      this.dialogType = 'add'
    },
    okHandler() {

    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .mini-container {
    min-height: calc(100vh - 80px);
  }
</style>

